<template>
    <div class="delete_user">

        <div class="return-bar" @click="back()">
            <i class="iconfont">&#xe668;</i>
            注销帐号
        </div>


        <div class="top">
            <div v-show=" step == 4 ">

                <div class="white_bg success" style="text-align:  center;padding: 20px 0px;">
                    <i class="iconfont">&#xe638;</i>
                    <h2 style="margin-top: -14px;margin-bottom: 10px;">注销帐号成功</h2>
                    <p>呼, 终于摆脱了有喜财富!</p>
                    <p>您的私有数据将在一周内清除</p>

                <div class="ux_row" style="padding: 20px;margin-top:50px">
                    <div class="ux_flex">
                        <a @click="goStep(-1)" style="width: 50%;text-align:center;" class="m_btn">返回</a>
                    </div>
                </div>
                </div>



            </div>

            <div v-show=" step == 3 ">
                <div class="white_bg" style="padding:20px;margin-bottom:5px">
                    帐号删除后手机号不能再用作注册新的有喜财富帐号
                </div>

                <div class="white_bg input" style="padding:20px;">
                    <ul class="ux_row">
                        <li class="ux_flex" style="flex:0 0 80px">登录手机号</li>
                        <li class="ux_flex"><input type="text" v-model="userData.phone" value="" /></li>
                        <li class="ux_flex" style="flex:0 0 90px"></li>
                    </ul>

                    <ul class="ux_row">
                        <li class="ux_flex" style="flex:0 0 80px">登录密码</li>
                        <li class="ux_flex"  ><input type="password"  v-model="userData.password" value="" /></li>
                        <li class="ux_flex" style="margin-left:10px;flex:0 0 80px;color:red" v-link="{path:'/forget-pwd'}"  >忘记密码</li>
                    </ul>

                    <ul class="ux_row">
                        <li class="ux_flex" style="flex:0 0 80px">验证码</li>
                        <li class="ux_flex" style="flex:0 0 90px;margin-right:10px"><input  v-model="userData.valicode" type="text" value="" /></li>
                        <li class="ux_flex" style="flex:0 0 90px;position:relative">
                            <img class="verify" v-show="verify_img.show" src="{{verify_img.src}}"  @click="reloadImg" />
                        </li>
                        <li class="ux_flex" style="flex:0 0 90px"></li>
                    </ul>

                    <div class="ux_row" style="padding: 20px 0px">
                        <div class="ux_flex" style="margin-right: 10px;">
                            <a @click="goStep(4)" style="width: 100%;text-align:center;padding:7px 0px;" class="m_btn_nob"  >下一步</a>
                        </div>
                        <div class="ux_flex">
                            <a @click="goStep(0)" style="width: 100%;text-align:center;" class="m_btn">取消</a>
                        </div>
                    </div>
                </div>

            </div>

            <div v-show=" step == 2 ">
                <div class="white_bg" style="padding:20px">
                    <h3 style="padding-bottom:10px;">说一下离开的原因吧,也许能帮上有喜财富:</h3>
                    <div class="para">

                            <!-- <input type="radio" class="chk_2" id="abc1" />
                            <label for="abc1">没有投资意向</label> -->
                        <ul>
                            <li>
                                <input @click="checkSelect" type="checkbox" id="durationFlg1"   v-model="pData.value"  name="durationFlg" class="rao" value="1">
                                <label  for="durationFlg1" id="durationFlg_lable" class="label durationFlg">没有投资意向</label>
                            </li>

                            <li>
                                <input @click="checkSelect" type="checkbox" id="durationFlg2"  v-model="pData.value"  name="durationFlg" class="rao" value="2">
                                <label   for="durationFlg2" id="durationFlg_lable" class="label durationFlg">有人总骚扰我</label>
                            </li>

                            <li>
                                <input @click="checkSelect" type="checkbox" id="durationFlg3"   v-model="pData.value"  name="durationFlg" class="rao" value="3">
                                <label  for="durationFlg3" id="durationFlg_lable" class="label durationFlg">不想暴露我的隐私</label>
                            </li>

                            <li>
                                <input @click="checkSelect" type="checkbox" id="durationFlg4"    v-model="pData.value"  name="durationFlg" class="rao" value="4">
                                <label  for="durationFlg4" id="durationFlg_lable" class="label durationFlg">我在清除多余帐号</label>
                            </li>


                            <li>
                                <input @click="checkSelect" type="checkbox" id="durationFlg5"   v-model="pData.value"  name="durationFlg" class="rao" value="0">
                                <label  for="durationFlg5" id="durationFlg_lable" class="label durationFlg">其他原因, 请填写</label>
                                <div style="margin-left:30px" v-show=" pData.value == '0' ">
                                    <input type="text" v-model="other_reason" style="padding: 8px 5px;border-radius: 2px;border: 1px solid #999;width: 100%;"/>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="ux_row" style="padding: 20px 0px">
                        <div class="ux_flex" style="margin-right: 10px;">
                            <a @click="goStep(3)" style="width: 100%;text-align:center;padding:7px 0px;" class="m_btn_nob"  >下一步</a>
                        </div>
                        <div class="ux_flex">
                            <a @click="goStep(0)" style="width: 100%;text-align:center;" class="m_btn">取消</a>
                        </div>
                    </div>
                </div>
            </div>


            <div v-show=" step == 1 ">
                <div class="white_bg" style="text-align:center;padding:50px 0px;font-size:18px;">
                    注册有喜财富 <span class="hl">{{days}}</span> 天
                </div>


                <div class="grey_bg">
                    <h3 style="margin-bottom:5px;">温馨提示:</h3>
                    <div>
                        删除后:有喜财富帐号不可恢复 您在有喜财富所有的操作数据将永久删除, 建议您注销时将账户交易记录做好备份。
                    </div>
                </div>

                <div class="white_bg" style="text-align:center;">
                    <div class="ux_row" style="padding: 20px;">
                        <div class="ux_flex">
                            <a @click="goStep(2)" class="m_btn_nob" style="padding:7px 0px;">继续注销</a>
                        </div>
                        <div class="ux_flex">
                            <a @click="goStep(0)" class="m_btn">回到有喜帐户</a>
                        </div>
                    </div>
                </div>

                <div class="grey_bg" style="text-align:center">
                    提示:自动注销功能仅对注册未投资用户开放, <br>如您已投资请联系客服400-678-8080进行手动注销。
                </div>
            </div>



        </div>
        <com-alert
        :show.sync="alertDialog.show"
        :title.sync="alertDialog.title"
        :buttontxt.sync="alertDialog.buttontxt"
        :content.sync="alertDialog.content"
        ></com-alert>
    </div>


</template>

<script>
import {Group, Cell} from 'vux';
import api from '../../data/api';
import ComAlert from '../../components/common/alert'
import { mapGetters, mapActions } from 'vuex'


export default {
    //props:['show_loading', 'phone'],
    data(){
        return {
            step:1,
            days:0,
            other_reason:'',
            remarkList:[
                {id:1, txt:'没有投资意向'},
                {id:2, txt:'有人总骚扰我'},
                {id:3, txt:'不想暴露我的隐私'},
                {id:4, txt:'我在清除多余帐号'}
            ],

            verify_img:{
                show:true,
                src:''
            },
            pData:{
                value:[],
                reason:'',
                checked:false
            },
            userData:{
                phone:'',
                password:'',
                remark:'',
                valicode:''
            }
        }
    },

    computed: {
		...mapGetters(['alertDialog'])
    },

    components:{
        ComAlert,
        Group,
        Cell
    },

    methods:{
		...mapActions([
            'setAlertDialog'
        ]),

		back(){
			this.$route.router.go('/user')
        },

		reloadImg(){
			this.verify_img.show = false;
			this.verify_img.src = '';
			var vm = this;
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = vm.global.r_key()
			var pkey = vm.global.p_key()
			setTimeout(function(){
			    vm.verify_img.show = true;
			    vm.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},10);
        },



        indexOf(val){

            for (var i = 0; i < this.pData.value.length; i++) {
                if (this.pData.value[i] == val) return i;
            }
            return -1;
        },

        remove(val){
            var index = this.indexOf(val);
            if (index > -1) {
                this.pData.value.splice(index, 1);
            }
        },



        checkSelect(key){
            var val = key.target.defaultValue;
            //console.log(key);
            if(val == 0){
                if(key.target.checked){
                    this.pData.value = ['0'];
                    this.pData.checked = true;
                }else{
                    this.pData.value = [];
                }
            }else{
                if(this.pData.checked){
                    this.pData.value = [];
                    this.pData.checked = false;
                    this.pData.value.push(key.target.defaultValue)
                }else{
                    if(key.target.checked)
                        this.pData.value.push(key.target.defaultValue);
                    else
                        this.remove(key.target.defaultValue);
                }
            }
        },


        getReason(){
            this.userData.remark = '';
            for(var i=0;i<this.remarkList.length;i++){
                for(var j=0;j<this.pData.value.length;j++){
                    if(this.pData.value[j] == this.remarkList[i].id){
                        if(this.userData.remark == '')
                            this.userData.remark = this.remarkList[i].txt;
                        else
                            this.userData.remark += ', ' + this.remarkList[i].txt;
                    }
                }
            }

            if(this.userData.remark == ''){
                this.userData.remark = this.other_reason;
            }
        },

        async goStep(key){
            switch(key){
                case 0:
                this.$route.router.go('/user')
                break;

                case 3:
                if(this.pData.value.length == 0 || (this.pData.value[0] == '0' && this.other_reason =='') ){
                    this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'请选择离开的原因!'})
                    return;
                }else{

                    this.getReason();
                    this.step = key;
                }
                break;

                case 4:

                this.$store.dispatch('setShowLoading', true), this.busy = true;
                var res = await api.user.delete_user(this.userData);
			    this.$store.dispatch('setShowLoading', false), this.busy = false;
                if(!res.status){
                    this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:res.msg})
                    this.reloadImg();
                    return;
                }else{
                    this.step = key;
                    sessionStorage.removeItem("login");
                    //this.phone = '';
                    this.$store.dispatch('setPhone', '');
                }
                break;

                case -1:
                this.$route.router.go('/')
                break;

                default:
                this.step = key;
                break;
            }
        },
        async getdays(){
            var res = await api.user.get_reg_days();
            this.days = res.day;
        }
    },

	route:{
		activate(transition){
            transition.next();

            var timestamp = Date.parse(new Date());
            timestamp = timestamp / 1000;

            var rkey = this.global.r_key()
            var pkey = this.global.p_key()

            //this.img_src = c_reg_verify_img+'&t='+timestamp
            this.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;


            this.getdays();
        }
    }
}
</script>


<style lang="scss" scoped>
@import '../../assets/sass/_mixin.scss';

.success{
    color: #7a7a77;
    font-size: 15px!important;
    h2{
        color:$mainColor;
        font-size: 20px;
    }
    i{
        font-size:48px;
        color:$mainColor;
    }
}
.input{
    .verify{
        height: 34px;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
    }
    .ux_row {
        align-items: center;
        margin-bottom:10px;
    }
    input{
        width: 100%;
        padding:8px 5px;
        border-radius: 4px;
        border:1px solid #e0e0e0;
    }
}

.para{
    .rao{
        display: none;
    }

    .rao + label{
        position: relative;
        text-indent: 30px;
        display: inline-block;
        line-height:35px;
        height: 35px;
        font-size: 14px;
        color:#545454;
        &:after {
            content:' ';
            background-color: #FFF;
            border: 2px solid $preColor;
            padding: 9px;
            border-radius:4px;
            display: inline-block;
            position: absolute;
            left:0;
            top:50%;
            transform: translate(0,-50%);
            z-index: 10;
        }
        &.not{
            color:#e0e0e0;
        }
    }

    .rao:checked + label {
        position: relative;
        &:before {
            font-family: "iconfont" !important;
            content: '\E64B';
            color: $mainColor;
            display: inline-block;
            position: absolute;
            left: 4px;
            z-index: 11;
            text-indent: 0px;
            top: 2px;
        }
        &:after {
            border: 2px solid  $mainColor;
        }
    }
}


.white_bg{

    font-size:14px;
    background:#fff;
    .hl{
        color:$mainColor;
        font-size:20px;
    }
    a{
        padding:8px 0px;
        width:80%;
        display: inline-block;
        font-size:16px;
    }
}

.grey_bg{
    h3{
        color:$mainColor;
        font-size:16px;

    }
    padding:15px;
    color:#909090;
}
</style>
